<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
</head>

<body>

    <div id="story" style="width: 600px;border: solid;border-color: blueviolet;border-radius:1.5ex;">
       
        <div align="center" >
            <h1 align=" center">我爱的故事</h1>
            <input type="text" v-bind:value="poetry[0].value"><button id="show" type="button"
                @click="flag=!flag">{{flag?"收起":"展开"}}<tton>
        </div>
        <div v-show="flag" v-for=" s in poetry" :key="s.name">
            {{s.value}}
        </div>
    
    </div>
    
        <script>
            new Vue({
                el: "#story",
                data: {
                    flag: false,
                    poetry: [{ "name": "0", "value": "侠客行" },
                    { "name": "1", "value": "赵客缦胡缨" }, {
                        "name": "2"
                        , "value": "吴钩霜月明"
                    }, { "name": "3", "value": "银鞍照白马" }, {
                        "name": "4"
                        , "value": " 飒踏如流星"
                    }, { "name": "5", "value": "十步杀一人" }, {
                        "name": "6", "value"
                            : "千里不留行"
                    }, { "name": "7", "value": "事了拂衣去" }, {
                        "name": "8", "value"
                            : "深藏功与名"
                    }, 
                ]}
            }) 
        </script>
    </body>
    
    <html>
    